<template>
  <div>
    <!-- 自定义table头部搜索  -->
    <div class="table_filter_cont" @mouseover="tableFilterMouseover" @mouseleave="tableFilterMouseout" :style="{
        left: options.left + 'px',
        top: options.top + 'px',
        width: options.width + 'px',
      }">
      <!--  icon   -->
      <div class="table_filter_arrow" :style="{ left: options.iconLeft - options.left + 'px' }">
        <span></span>
      </div>
      <!--  Input   -->
      <div class="table_filter_mian" v-if="options.type.split('-')[0] == 'input'">
        <Input style="width: 100%" v-model="options[options.type.split('-')[1]]" :maxlength="options.type.split('-')[2]" prefix="ios-search" :placeholder="options.placeholder" />
      </div>
      <!--  DatePicker  -->
      <div class="table_filter_mian" v-if="options.type.split('-')[0] == 'datePicker'">
        <DatePicker :clearable="false" style="width: 100%" v-model="options[options.type.split('-')[1]]" :type="options.type.split('-')[2]" :placeholder="options.placeholder"
          @on-open-change="openDatePickerFun" :options="{disabledDate(date) {
            return limitOptionFun(options.type.split('-')[3],date)
          }}" />
      </div>
      <!--  Checkbox  -->
      <div class="table_filter_checkbox" v-if="options.type.split(' -')[0]=='Checkbox'">
        <CheckboxGroup class=" checkboxGroupClass" v-model="options[options.type.split('-')[1]]">
          <Checkbox v-for="(item, index) in options[options.type.split('-')[2]]" :key="index" :label="item.val"><span class="checkboxSpan">{{ item.name }}</span></Checkbox>
        </CheckboxGroup>
      </div>
      <!--  Select  -->
      <div class="table_filter_mian" v-if="options.type.split('-')[0] == 'Select'">
        <Select ref="tagSelect" v-model="options[options.type.split('-')[1]]" filterable :multiple="options.type.split('-')[3] === 'multiple' ? true : false" :clearable="false" style="width: 100%"
          :placeholder="options.placeholder" @on-select="openSelectFun" :remote-method="
            (e) => {
              return remoteChangeFun(e, options.type.split('-')[1]);
            }
          " @on-query-change="
            (e) => {
              return openChangeFun(e, options.type.split('-')[1]);
            }
          ">
          <Option v-for="item in options[options.type.split('-')[2]]" :key="item.val" :value="item.val">{{ item.name }}</Option>
        </Select>
      </div>
      <!-- 操作 -->
      <div class="tableTitleClass" v-if="options.type.split('-')[0] == 'tableTitle'">
        <CheckboxGroup v-model="options[options.type.split('-')[1]]">
          <Checkbox v-for="(item, index) in options[options.type.split('-')[2]]" :key="index" :label="item.val"><span class="checkboxSpan">{{ item.name }}</span></Checkbox>
        </CheckboxGroup>
      </div>
      <!--  Select 获取所有城市列表  -->
      <div class="table_filter_mian" v-if="options.type.split('-')[0] == 'SelectCity'">
        <Select v-model="options[options.type.split('-')[1]]" filterable :multiple="options.type.split('-')[3] === 'multiple' ? true : false" :clearable="false" style="width: 100%"
          :placeholder="options.placeholder" @on-select="openSelectFun">
          <Option v-for="(item, index) in options[options.type.split('-')[2]]" :key="index" :value="item.cityCode">{{ item.cityName }}</Option>
        </Select>
      </div>
      <!--  三级联动   -->
      <div class="table_filter_mian" v-if="options.type.split('-')[0] == 'cascader'">
        <!-- <Input style=" width: 100%;" v-model="options[options.type.split('-')[1]]" prefix="ios-search" :placeholder="options.placeholder" /> -->
        <Cascader :data="options[options.type.split('-')[2]]" v-model="options[options.type.split('-')[1]]"></Cascader>
      </div>
      <!-- 来源渠道 -->
      <div class="table_filter_mian" v-if="options.type.split('-')[0] == 'SelectChannel'">
        <Select v-model="options[options.type.split('-')[1]]" filterable :multiple="options.type.split('-')[3] === 'multiple' ? true : false" :clearable="false" style="width: 100%"
          :placeholder="options.placeholder" @on-select="openSelectFun">
          <template v-for="item in channelList">
            <Option :value="item.channelId" :key="item.channelId">{{
              item.channelName  
            }}</Option>
            <!-- :disabled="items.validate == 2"  -->
          </template>
        </Select>
      </div>
      <!-- 互动方式 -->
      <div class="table_filter_mian" v-if="options.type.split('-')[0] == 'SelectInteractive'">
        <Select v-model="options[options.type.split('-')[1]]" filterable :multiple="options.type.split('-')[3] === 'multiple' ? true : false" :clearable="false" style="width: 100%"
          :placeholder="options.placeholder" @on-select="openSelectFun">
          <Option v-for="(item, index) in interactiveWayList" :value="item.channelId + ''" :key="index">{{ item.channelName + " - " + item.channelNameS }}</Option>
        </Select>
      </div>
      <!-- 底部 -->
      <div class="table_filter_foot">
        <Button type="primary" @click="okFilter">确定</Button>
        <Button type="default" @click="cancelFilter">取消</Button>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    options: {
      type: Object,
      defult: () => {},
    },
    channelType: {
      type: Boolean,
      defult: false,
    },
    channelList: {
      type: Array,
      defult: () => [],
    },
  },
  data() {
    return {
      listStyle: {
        width: '220px',
        height: '400px',
      },
      clientWidth: document.documentElement.clientWidth, // 获取屏幕宽度
      openDatePicker: true, // 选择下拉后 延迟几秒
      selectSearchList: [],
      selectSearchVal: '',
      sourceChannelList: [],
      interactiveWayList: [],
      channelListMess: [],
    }
  },
  methods: {
    limitOptionFun(limit, date) {
      return limit ? eval(limit) : ''
    },
    clearFilter() {
      setTimeout(() => {
        if (this.$refs.tagSelect) {
          this.$refs.tagSelect.setQuery('')
        }
      }, 10)
    },

    // 确定
    okFilter() {
      this.options.left = -1000
      this.options.top = -1000
      this.$emit('okFilterFun', this.options)
    },
    // 取消
    cancelFilter() {
      if (
        this.options.type.split('-')[0] == 'Checkbox' ||
        this.options.type.split('-')[3] == 'multiple'
      ) {
        this.options[this.options.type.split('-')[1]] = []
      } else if (this.options.type.split('-')[0] == 'AutoComplete') {
        this.selectSearchList = []
        this.selectSearchVal = ''
        this.options[this.options.type.split('-')[1]] = ''
        this.options[this.options.type.split('-')[2]] = ''
      } else {
        this.options[this.options.type.split('-')[1]] = ''
      }
      this.options.left = -1000
      this.options.top = -1000
      this.$emit('cancelFilterFun', this.options)
    },
    // 鼠标移入弹框 关闭定时器
    tableFilterMouseover() {
      clearTimeout(this.options.setTimeout)
    },
    // 鼠标移除弹框
    tableFilterMouseout() {
      if (!this.openDatePicker) {
        this.options.setTimeout = setTimeout(() => {
          this.options.left = -1000
          this.options.top = -1000
          this.openDatePicker = true
        }, 800)
      } else {
        this.options.left = -1000
        this.options.top = -1000
      }
    },
    // 时间组件
    openDatePickerFun(val) {
      this.openDatePicker = val
    },
    // select
    openSelectFun(val) {
      this.openDatePicker = false
    },
    remoteChangeFun(e, val) {
      console.log(e, val)
      if (e && val == 'attributionConsultantVal') {
        this.$emit('openChangeFun', e)
      } else {
        let params = {
          value: e,
          type: val,
        }
        this.$emit('openChangeFun', params)
      }
    },
    openChangeFun(e, val) {
      if (e != '') {
        return false
      }
      if (e && val == 'attributionConsultantVal') {
        this.$emit('openChangeFun', e)
      } else {
        let params = {
          value: e,
          type: val,
        }
        this.$emit('openChangeFun', params)
      }
    },
    selectSelectListFun(value) {
      this.selectSearchList.map((item) => {
        if (item.userName === value) {
          this.options[this.options.type.split('-')[1]] = item.userId
          this.options[this.options.type.split('-')[2]] = item.userName
        }
      })
    },
  },
  created() {},
  mounted() {
    console.log('过滤的options', this.options)
  },
  watch: {
    channelList: {
      deep: true,
      handler(newValue) {
        this.channelListMess = newValue
      },
    },
  },
}
</script>
<style lang="scss" scoped>
.subscribeModalStyle {
  .footer {
    margin-top: 20px;
    text-align: center;
    button {
      width: 80px;
      margin: 0 10px;
    }
  }
  ::v-deep .ivu-modal-body {
    padding: 0;
  }
}
.subscribeModalStateModal {
  padding: 20px 30px;
}
.table_filter_cont {
  z-index: 101;
  background-color: #fff;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
  position: fixed;
}
.table_filter_mian {
  padding: 14px;
}
.table_filter_checkbox {
  padding: 14px 14px 11px 14px;
}
.table_filter_foot {
  border-top: 1px solid #dcdee2;
  text-align: center;
  padding: 14px 0;
  button {
    margin: 0 10px;
  }
}
.table_filter_arrow {
  position: absolute;
  top: -6px;
  margin-left: 2px;
  span:after {
    display: block;
    content: ' ';
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 6px solid #fff;
  }
}
.checkboxGroupClass {
  label {
    width: 100%;
    margin-bottom: 6px;
    overflow: hidden;
    &:last-child {
      margin-bottom: 0px;
    }
    .ivu-checkbox {
      float: right;
    }
    .checkboxSpan {
      float: left;
    }
  }
}
.tableTitleClass {
  padding: 14px 14px 8px 14px;
  label {
    margin-bottom: 6px;
  }
  .checkboxSpan {
    margin-left: 5px;
  }
}

.rightFooter {
  .ivu-transfer-list:first-child {
    .ivu-transfer-list-footer {
      .footer-btn {
        height: 23px;
        Button {
          display: none;
        }
      }
    }
  }
}
</style>

